<template>
  <div class="content">
    <div style="
          width: 100%;height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
         :append-to-body="true"
    >
      <div class="cover">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <div class="title" v-if="type===1">全市农村劳动力</div>
            <div class="title" v-else-if="type===2">全市城镇劳动力</div>
            <div class="title" v-else-if="type===3">全市劳动力</div>
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>
        <div class="cover-tab" style="margin: 40px auto">
          <div class="amount" :class="type===1?'active':''" @click="type=1">全市农村劳动力</div>
          <div class="without" :class="type===2?'active':''" @click="type=2">全市城镇劳动力</div>
          <div class="already" :class="type===3?'active':''" @click="type=3">全市劳动力</div>
        </div>
        <template>
          <!--          <div class="cover-middle">-->
          <!--            统计时间：-->
          <!--            <div class="begin">2023/01/01</div>-->
          <!--            至-->
          <!--            <div class="over">2023/07/23</div>-->
          <!--          </div>-->
          <div class="cover-bottom">
            <div class="region-item" v-for="item in list" :key="item.id" @click="oncloseDialog1(item)">
              <div class="name">{{ item.name }}</div>
              <div class="count" v-if="type<4">{{ item.value }}</div>
              <div class="count" v-else>{{ item.percent }}</div>
              <template v-if="type<4">人</template>
              <template v-else>%</template>
            </div>
          </div>
        </template>
      </div>
      <Cover v-if="closeDialog1" :id="fatherId" :closeDialog1="close" :type="type" :name="name"></Cover>
    </div>
  </div>
</template>

<script>
import Cover from "@/components/Cover/Cover.vue";
import {eachRuralAndCityCountApi} from "@/api/statistics-1";

export default {
  name: "Cover2",
  components: {
    Cover
  },
  data() {
    return {
      closeDialog1: false,
      fatherId: 0,
      count: 2,
      page: 1,
      limit: 6,
      isShow: true,
      type: 1,
      list: [],
      list1: [],
      name: ''
    }
  },
  props: ['fairActive', 'closeDialog'],
  methods: {
    oncloseDialog1(e) {
      if (this.type !== 4) {
        this.closeDialog1 = true
        this.fatherId = e.id
        this.name = e.name
      }
    },
    close() {
      this.closeDialog1 = false
    },
    onCloseDialog(item) {
      this.closeDialog(0)

    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    getDetail() {
      if (this.type === 1) {

        this.list = [
          {value: 108922, name: "肃州区", id: 1},
          {value: 49955, name: "金塔", id: 2},
          {value: 47867, name: "敦煌", id: 3},
          {value: 39674, name: "瓜州", id: 4},
          {value: 35518, name: "玉门", id: 5},
          {value: 3665, name: "肃北", id: 6},
          {value: 1178, name: "阿克塞", id: 7}
        ];
      }
   else if (this.type === 2) {

        this.list = [
          {value: 123941, name: "肃州区", id: 1},
          {value: 13278, name: "金塔", id: 2},
          {value: 28845, name: "敦煌", id: 3},
          {value: 19645, name: "瓜州", id: 4},
          {value: 16800, name: "玉门", id: 5},
          {value: 3466, name: "肃北", id: 6},
          {value: 4428, name: "阿克塞", id: 7}
        ];
      }
      else if (this.type === 3) {

        this.list = [
          {value: 232863, name: "肃州区", id: 1},
          {value: 63233, name: "金塔", id: 2},
          {value: 76712, name: "敦煌", id: 3},
          {value: 59319, name: "瓜州", id: 4},
          {value: 52318, name: "玉门", id: 5},
          {value: 7131, name: "肃北", id: 6},
          {value: 5606, name: "阿克塞", id: 7}
        ];
      }
      else {
        eachRuralAndCityCountApi({type: this.type}).then((res) => {

          if (res.code === 200) {
            this.list = res.data
          }
        })
      }

    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage', this.page)
      this.getList()
    },
  },
  watch: {
    type() {
      this.getDetail();
    }
  },
  mounted() {
    this.type = this.fairActive
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.content {
  .cover {
    position: relative;
    width: 52%;
    height: 70%;
    background-color: #0A1456;
    border-radius: 15px;
    padding: 20px;

    .cover-tab {
      display: flex;
      width: 70%;
      border: 1px solid #31A7FF;
      margin: 0 auto;
      cursor: pointer;

      .amount {
        width: 30%;
        color: #fff;
        border-right: 1px solid #31A7FF;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }

      .amount.active {
        background-color: #02A9EC;
      }

      .already {
        width: 37%;
        color: #fff;
        border-right: 1px solid #31A7FF;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }

      .already.active {
        background-color: #02A9EC;
      }

      .without {
        width: 37%;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-right: 1px solid #31A7FF;
      }

      .without.active {
        background-color: #02A9EC;
      }
    }

    .cover-top {
      display: flex;
      justify-content: space-between;

      .top-left {
        display: flex;

        .sign {
          background-color: #498CF3;
          width: 10px;
          height: 20px;
          border-radius: 15px;
          margin-right: 15px;
        }

        .title {
          color: #ffffff;
        }
      }

      .top-right {
        color: #2FA1F9;
        font-size: 20px;
        cursor: pointer;
        margin-right: 5px;
      }
    }

    .cover-middle {
      display: flex;
      margin: 30px 0 30px 82px;
      //justify-content: center;
      color: #fff;

      .begin {
        width: 120px;
        border: 1px solid #31A6FE;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        margin-right: 15px;
      }

      .over {
        width: 120px;
        border: 1px solid #31A6FE;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        margin: 0 15px;
      }
    }

    .cover-bottom {
      display: flex;
      flex-wrap: wrap;
      width: 83%;
      height: 60%;
      margin: 0 auto;
      border-radius: 5px;

      .region-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((100% - 30px) / 3);
        height: 30%;
        background-color: #164088;
        border-radius: 5px;
        color: #fff;
        margin-right: 10px;
        border: 1px solid #31A7FF;
        cursor: pointer;

        .name {
          color: #fff;

        }

        .count {
          color: #50FFC1;
          font-size: 30px;
          margin: 0 5px 10px 5px;
        }
      }
    }
  }
}
</style>


